<template>
	<view class="container bg-white" style="padding:20rpx 0;">
		<view style="padding-bottom: 100rpx;">
			<view class="bg-white">
				<view class="section">
					<!-- store info begin -->
					<view :hover="false">
						<view class="address-box w-100 d-flex align-items-center">
							<view class="d-flex flex-column w-60">
								<view class="w-100 font-size-lg text-color-base text-truncate mb-10">
									<u--text text="观澜路奶茶店" ></u--text>
								</view>
								<view class="w-100 d-flex align-items-center overflow-hidden">
									<up-icon name="map" color="#f0ad4e" size="24"></up-icon><view class="text-truncate font-size-sm text-color-assist">{{ '广东省深圳市龙华区观澜二路商铺位' }}</view>
								</view>
							</view>
							<view class="d-flex justify-content-end align-items-center w-40">
								<up-icon name="phone" color="#f0ad4e" size="24"></up-icon>
								<uni-icons type="paperplane-filled" color="#f0ad4e" size="24"/>

							</view>
						</view>
					</view>
					<!-- store info end -->
					<!-- goods begin -->
					<view :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
							<up-cell-group :border="false">
								<up-cell v-for="(good, index) in order.goods" :key="index"
									@click="goToPackages"
									:title="good.name || '珍珠奶茶' "
									isLink
									
									center
									:label="good.property || '标准糖,标准冰'"
									:border="false"
								>
							<template #value>

								<view class="d-flex w-40 align-items-center justify-content-between pl-30">
									<view class="font-size-base text-color-base">x{{ good.number||1 }}</view>
									<view class="font-size-base text-color-base font-weight-bold">￥{{ good.price||12.00 }}</view>
								</view>

							</template>

						</up-cell>
							
							</up-cell-group>
						</view>
					</view>
					<!-- goods end -->
				</view>
				<view class="section">
					<!-- payment and amount begin -->
			
					<up-cell-group :border="false">
				<up-cell
					@click="goToPackages"
					title="支付方式"
					
					:value="order.pay_mode"
					center
					:border="false"
				></up-cell>
				<up-cell
					@click="goToPackages"
					title="金额总计"
					
					:value="'￥'+( order.amount||0)"
					center
					:border="false"
				></up-cell>
			</up-cell-group>
					<!-- payment and amount end -->
				</view>
				<view class="section">
					<!-- order info begin -->

					<up-cell-group >
				<up-cell
					@click="goToPackages"
					title="下单时间"
					
					value="2024-12-12 12:12:12"
					center
					:border="false"
				></up-cell>
				<up-cell
					@click="goToPackages"
					title="下单门店"
					
					value="教育路店"
					center
					:border="false"
				></up-cell>
				<up-cell
					@click="goToPackages"
					title="支付方式"
					
					value="微信支付"
					center
					:border="false"
				></up-cell>
				<up-cell
					@click="goToPackages"
					title="订单号"
					
					value="2122212xxxeee2312"
					center
					:border="false"
				></up-cell>
			</up-cell-group>



				
					<!-- order info end -->
				</view>
				<!-- order other info begin -->

				<up-cell-group>
				<up-cell
					@click="goToPackages"
					title="取单号"
				
					value="120"
					center
					:border="false"
				></up-cell>
				<up-cell
					@click="goToPackages"
					title="享用方式"
			
					value="自取"
					center
					:border="false"
				></up-cell>
				<up-cell
					@click="goToPackages"
					title="取餐时间"
			
					value="立即取餐"
					center
					:border="false"
				></up-cell><up-cell
					@click="goToPackages"
					title="完成制作时间"
			
					value="2024-12-12  12:12:12"
					center
					:border="false"
				></up-cell>
				<up-cell
					@click="goToPackages"
					title="备注"
			
					value="2024-12-12  12:12:12"
					center
					:border="false"
				></up-cell>
			</up-cell-group>


			
				<!-- order other info end -->
			</view>
			<!-- <view class="position-relative w-100">
				<image src="/static/images/order/bottom.png" mode="widthFix" class="w-100"></image>
				<view class="invote-box" v-if="!order.invoice_status">
					<view class="font-size-base text-color-primary" @tap="goToInvoice">去开发票</view>
					<image src="/static/images/order/right.png"></image>
				</view>
			</view> -->
		</view>
		<view class="btn-box">
			<!-- <view class="item" v-if="order.invoice_status > 0"><button type="primary">查看发票</button></view>
			<view class="item"><button type="primary" plain @tap="review">去评价</button></view> -->
			<view class="item"><u-button type="warning">再来一单</u-button></view>
		</view>
	</view>
</template>

<script>
// import Orders from '@/api/orders';
// import listCell from '@/components/list-cell/list-cell';

export default {
	components: {
		//listCell
	},
	data() {
		return {
			order: {
				name:"珍珠奶茶",goods:[]
			}
		};
	},
	onLoad({ id }) {
		//this.order = Orders.find(item => item.id == id);
		this.order.goods = [   {
        "coupon_name": "",
        "receive_at": 0,
        "pay_mode": "微信支付",
        "pay_user_name": "tinypuppet",
        "updated_at": 1588937139,
        "goods_num": 2,
        "completed_at": 1588937139,
        "created_at": 1588936782,
        "invoice_status": 1,
        "sended_time": 0,
        "status_text": "已完成",
        "remark": "",
        "coupon_amount": 0,
        "mobile": "18666600000",
        "user_name": "tinypuppet",
        "payed_at": 1588936805,
        "total_amount": "50.00",
        "store": {
            "address": "广东省深圳市宝安区深圳市宝安区福海街道宝安大道6259号 L1 层55/56号商铺",
            "longitude": "113.804601",
            "latitude": "22.678654",
            "mobile": "075523224859",
            "name": "福永同泰时代城店"
        },
        "send_status": 0,
        "discount": [],
        "status": 5,
        "completed_time": "2020-05-08 19:25:39",
        "amount": "50.00",
        "multi_store": "福永同泰时代城店",
        "productioned_time": "2020-05-08 19:24:37",
        "postscript": "打包",
        "sort_num": "8093",
        "order_no": "ABCDEFGHIJKLMN0001",
        "id": 1,
        "typeCate": 1,
        "goods": [
            {
                "number": 1,
                "originAmount": "28.00",
                "price": "28.00",
                "unit": "件",
                "property": "去冰,标准糖",
                "image": "https://img-shop.qmimg.cn/s23107/2020/03/19/630a810c8c7201c112.jpg",
                "amount": "28.00",
                "name": "霸气葡萄"
            },
            {
                "number": 1,
                "originAmount": "22.00",
                "price": "22.00",
                "unit": "件",
                "property": "标准冰,标准糖",
                "image": "https://img-shop.qmimg.cn/s23107/2020/03/27/8d4a1edb7c9e2d6554.jpg",
                "amount": "28.00",
                "name": "霸气葡萄"
            }
        ]
    },
    {
        "coupon_name": "",
        "receive_at": 0,
        "pay_mode": "微信支付",
        "pay_user_name": "tinypuppet",
        "updated_at": 1588682566,
        "goods_num": 3,
        "completed_at": 1588682566,
        "created_at": 1588682001,
        "invoice_status": 0,
        "sended_time": 0,
        "status_text": "已完成",
        "remark": "",
        "coupon_amount": 0,
        "mobile": "18666600000",
        "user_name": "tinypuppet",
        "payed_at": 1588682014,
        "total_amount": "73.00",
        "store": {
            "address": "广东省深圳市宝安区深圳市宝安区福海街道宝安大道6259号 L1 层55/56号商铺",
            "longitude": "113.804601",
            "latitude": "22.678654",
            "mobile": "075523224859",
            "name": "福永同泰时代城店"
        },
        "send_status": 0,
        "discount": [],
        "status": 5,
        "completed_time": "2020-05-05 20:42:46",
        "amount": "73.00",
        "multi_store": "福永同泰时代城店",
        "productioned_time": "2020-05-05 20:38:49",
        "postscript": "打包",
        "sort_num": "8145",
        "order_no": "ABCDEFGHIJKLMN0002",
        "id": 2,
        "typeCate": 2,
        "goods": [
            {
                "number": 1,
                "originAmount": "27.00",
                "price": "27.00",
                "unit": "件",
                "property": "标准,标准（冰沙）,标准糖",
                "image": "https://img-shop.qmimg.cn/s23107/2020/04/26/79187a01f23e6f1e66.jpg",
                "amount": "27.00",
                "name": "杨枝甘露宝藏茶"
            },
            {
                "number": 1,
                "originAmount": "29.00",
                "price": "29.00",
                "unit": "件",
                "property": "标准(芝士),标准冰,标准糖",
                "image": "https://img-shop.qmimg.cn/s23107/2019/04/26/a2aad6ced9aa42e2c6.jpg",
                "amount": "29.00",
                "name": "霸气芝士芒果"
            },
            {
                "number": 1,
                "originAmount": "17.00",
                "price": "17.00",
                "unit": "件",
                "property": "去冰,标准糖",
                "image": "https://img-shop.qmimg.cn/s23107/2019/04/26/333b43719bd81f4e00.jpg",
                "amount": "17.00",
                "name": "霸气绿柠檬"
            }
        ]
    },
    ]
	},
	methods: {
		review() {
			// const date = this.order.completed_time.split(' ')[0]
			// uni.navigateTo({
			// 	url: '/pages/review/review?storename=' + this.order.store.name + '&typeCate=' + this.order.typeCate + '&date=' + date
			// })
		},
		goToInvoice() {
			uni.navigateTo({
				url: '/pages/invoice/invoice'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
@mixin arch {
	content: "";
	position: absolute;
	//background-color: $bg-color;
	width: 30rpx;
	height: 30rpx;
	bottom: -15rpx;
	z-index: 10;
	border-radius: 100%;
}

.section {
	position: relative;
	
	&::before {
		@include arch;
		left: -15rpx;
	}
	
	&::after {
		@include arch;
		right: -15rpx;
	}
}

.pay-cell {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	//font-size: $font-size-base;
	//color: $text-color-base;
	margin-bottom: 40rpx;

	&:nth-last-child(1) {
		margin-bottom: 0;
	}
}

.invote-box {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	image {
		width: 30rpx;
		height: 30rpx;
	}
}

.btn-box {
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	z-index: 11;
	
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 10rpx;
		flex: 1;
		flex-shrink: 0;
		
		button {
			width: 100%;
			border-radius: 50rem !important;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
		}
	}
}

.address-box{
	padding: 0 30rpx;
}
</style>
